<template>
  <div style="height: 100%;" v-loading="loading">
    <el-container style="min-height: 100%;">
      <el-header class="" style="margin-bottom: 20px;padding: 0;">
        <HeaderVue @headerClick="headerClick" :refresh="state.refresh" />
      </el-header>
      <el-container style="min-height: 100%;">
        <el-aside width="275px" style="background-color: #FFFFFF;min-height: 100%;">
          <AsideVue @asideClick="asideClick" :asideData="state.asideData" :refresh="state.refresh" />
        </el-aside>
        <el-main style="padding: 0;padding-left: 20px;">
          <ContentWrap>
            <div class="flex aic jcsb" style="flex-wrap: wrap;margin-bottom: 16px;">
              <div class="flex">
                <el-input v-model="state.searchValue" clearable style="width: 340px;max-width:600px;"
                  placeholder="请输入姓名/电话/邮箱" />
                <!-- <InputTags @onChange="onChange" :Refresh="state.refreshSearch"/> -->
                <!-- <el-select v-model="state.ruleForm.searchValue" multiple filterable allow-create default-first-option
                  :reserve-keyword="false" placeholder="请输入姓名/电话/邮箱" style="min-width: 50%;margin-right: 16px;">
                  <el-option v-for="item in state.searchValueOptions" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select> -->
                <ElButton type="primary" :icon="Search" @click="onSearch" style="margin-left: 16px;">
                  查询
                </ElButton>
                <ElButton :icon="Refresh" @click="onReset">
                  重置
                </ElButton>
              </div>
              <div class="">
                <ElButton link type="primary" @click="onOpen">
                  自定义配置筛选项
                </ElButton>
              </div>
            </div>
            <div class="flex flex-wrap aic">
              <div class="flex aic " style="width: 250px;height: 40px;margin-right: 16px;"
                v-for="(item, index) in state.datas" :key="index">
                <el-select v-if="item.type == 'select'" clearable v-model="item.value" :placeholder="item.label"
                  style="width: 250px;" :multiple="item.label == '工作经验' || item.label == '学历' || item.label == '到岗时间'">
                  <el-option v-for="items in item.options" clearable :key="items.dictValue" :label="items.dictLabel"
                    :value="items.dictValue" v-show="items.dictValue == '-1'?item.name=='笔试通知状态'?false:true:true" />
                </el-select>
                <el-date-picker style="width: 250px;" v-if="item.type == 'dateTime'" v-model="item.value" clearable
                  type="date" :placeholder="item.label" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" />
                <el-input style="width: 250px;" v-if="item.type == 'input'" allow-create v-model="item.value"
                  :placeholder="item.label" clearable />
                <el-cascader style="width: 250px;" v-if="item.type == 'cascader'" clearable v-model="item.value"
                  :placeholder="item.label" :options="item.options" :props="item.props" />
              </div>

            </div>
            <div class="flex aic" style="flex-wrap: wrap;" v-if="false">
              <el-select class="margin-left16" clearable v-model="state.ruleForm.educationLevel" placeholder="学历"
                style="width: 180px">
                <el-option v-for="item in state.options1" clearable :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select class="margin-left16" clearable v-model="state.ruleForm.requirementsYears" placeholder="工作经验"
                style="width: 180px">
                <el-option v-for="item in state.options2" clearable :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select class="margin-left16" clearable v-model="state.ruleForm.arrivalTime" placeholder="到岗时间"
                style="width: 180px">
                <el-option v-for="item in state.options3" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <div class="margin-left16">
                <el-cascader v-model="state.ruleForm.deptId" clearable placeholder="应聘部门" :options="state.options"
                  :props="props1" />
              </div>
              <div class="margin-left16">
                <el-cascader v-model="state.ruleForm.currentAddress" clearable placeholder="请选择地址" :options="pcaTextArr"
                  :props="cityProps" />
              </div>
              <!-- <el-select v-model="state.ruleForm.selectedCity" class="margin-left16" placeholder="请选择城市" @change="onCityChange">
                <el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
                </el-option>
              </el-select> -->
              <el-select clearable v-if="state.type == 0" class="margin-left16"
                v-model="state.ruleForm.initialScreeningUnqualifiedLabel" placeholder="简历标签" style="width: 180px">
                <el-option v-for="item in state.options6" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select clearable v-if="state.type == 2" class="margin-left16"
                v-model="state.ruleForm.writingTestingStatus" placeholder="笔试通知状态" style="width: 180px">
                <el-option v-for="item in state.optionsPen" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select clearable v-if="state.type == 2" class="margin-left16"
                v-model="state.ruleForm.writingTestingResult" placeholder="笔试结果" style="width: 180px">
                <el-option v-for="item in state.options5" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select clearable v-if="state.type == 2" class="margin-left16" v-model="state.socreValue"
                placeholder="笔试成绩" style="width: 180px">
                <el-option v-for="item in state.optionsSocre" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select clearable v-if="state.type == 3" class="margin-left16" v-model="state.ruleForm.interviewStatus"
                placeholder="面试通知状态" style="width: 180px">
                <el-option v-for="item in state.options4" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select clearable v-if="state.type == 3" class="margin-left16" v-model="state.ruleForm.interviewResult"
                placeholder="面试结果" style="width: 180px">
                <el-option v-for="item in state.options5" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <el-select clearable v-if="state.type == 3" class="margin-left16" v-model="state.socreValue"
                placeholder="面试成绩" style="width: 180px">
                <el-option v-for="item in state.optionsSocre" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <!-- <el-select clearable v-if="state.type == 4" class="margin-left16"
                v-model="state.ruleForm.writingTestingResult" placeholder="体检审查" style="width: 180px">
                <el-option v-for="item in state.options6" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select> -->
              <el-select clearable v-if="state.type == 4" class="margin-left16"
                v-model="state.ruleForm.medicalReportStatus" placeholder="体检报告上传状态" style="width: 180px">
                <el-option v-for="item in state.options7" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
              <div style="width: 360px;" v-if="state.type == 2 || state.type == 3" class="margin-left16">
                <el-date-picker clearable range-separator="To" v-model="state.times" format="YYYY-MM-DD "
                  type="daterange" value-format="YYYY-MM-DD HH:mm:ss" label="" start-placeholder="开始时间"
                  end-placeholder="结束时间" />
              </div>
              <!-- <div class="flex aic margin-left16">
                <p class="fonts16">到岗时间：</p>
              </div> -->
              <!-- <InputTags v-model="state.ruleForm.searchValue" /> -->
              <!-- <el-input class="margin-left16" allow-create v-model="state.ruleForm.searchValue" placeholder="请输入姓名/电话/邮箱"
                style="width: 240px;">
              </el-input> -->

              <!-- <div class="flex aic ">
              <p class="fonts14">简历标签：</p>
              <el-select v-model="state.input3" placeholder="请选择简历标签" style="width: 180px">
                <el-option label="Restaurant" value="1" />
                <el-option label="Order No." value="2" />
                <el-option label="Tel" value="3" />
              </el-select>
            </div> -->
            </div>
          </ContentWrap>
          <el-main v-loading="loadings"
            style="background-color: #fff;min-height: calc(100% - 142px);position: relative;padding-bottom: 60px;margin-top: 20px;">
            <ListVue :type="state.type" :data="state.data" @listVue="listClick" :ruleFrom="state.ruleForm"
              :total="state.total" />
          </el-main>
        </el-main>

      </el-container>
    </el-container>
    <!-- 自定义配置筛选项 -->
    <el-drawer v-model="drawer" size="700" title="自定义配置筛选项" :before-close="handleClose">
      <DrawerVue @drawerClick="handleClose" :refush="state.drawerRefush" />
    </el-drawer>
  </div>
</template>
<script setup lang="tsx">
import { pcaTextArr } from "element-china-area-data";
import { positionRegistrationList, findAddressList } from "@/api/home/index"
import { deptTreeList } from "@/api/organizational/index"
import { ContentWrap } from '@/components/ContentWrap'
import { dictSect } from "@/utils/dictUnit"
import { HeaderVue } from "./components/index"
import { AsideVue } from "./components/index"
import { ListVue, DrawerVue } from "./components/index"
import { InputTags } from "./components/index"
import { Search, Refresh } from '@element-plus/icons-vue'
import { reactive, onMounted, ref, watch, onActivated } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const loadings = ref(false)
const props1 = {
  checkStrictly: true,
  value: "id",
  label: "label",
  emitPath: false
}
const onChange = (value: any) => {
  console.log("搜索值", value);
  state.ruleForm.searchValue = value
}

// console.log(pcaTextArr);
const drawer = ref(false)
const handleClose = () => {
  state.datas = JSON.parse(localStorage.getItem("workTypes_web"))
  onReset()
  drawer.value = false
}
onMounted(() => {
  state.datas = JSON.parse(localStorage.getItem("workTypes_web"))
})
const onOpen = () => {
  drawer.value = true
  state.drawerRefush = !state.drawerRefush
}
const cityProps = {
  checkStrictly: true,
  value: 'value',   // 指定选项的 值 为选项对象的某个属性值
  label: 'label',   // 指定选项 标签 为选项对象的某个属性值	
  children: 'children'    //指定选项的 子选项 为选项对象的某个属性值
}

const loading = ref(false)
const state = reactive({
  refreshSearch: false,
  tags: [] as any,
  drawerRefush: false,
  datas: [] as any,
  socreValue: "",
  searchValueOptions: [] as any,
  refresh: true,//刷新
  input3: "",
  times: [],
  hearderData: [] as any,
  options8: [] as any,
  searchValue: "",
  ruleForm: {
    currentAddress: "",//地址
    statusNotIn: 0,
    statusIn: "",
    ageGe:"",//年龄开始
    ageLe:"",//年龄结束
    isFullTimeEducation:"",//全日制
    experienceEndTimeStart:"",//毕业开始时间
    experienceEndTimeEnd:"",//毕业结束时间
    // statusGe: "",
    // statusLe: "",
    searchValue: "",
    positionId: "",
    educationLevel: "",//学历
    requirementsYears: "",//工作经验
    arrivalTime: "",//到岗时间
    isAsc: "asc",
    pageNum: 1,
    pageSize: 10,
    deptId: "",//部门
    orderByColumn: "",
    gender: "",//性别
    jobSearchStatus: "",//求职状态
    lookingForwardSalary: "",//期望薪资
    createTimeStart: "",//投递开始时间
    createTimeEnd: "",//投递结束时间
    initialScreeningUnqualifiedLabel: "",//简历标签
    lookingForwardIndustry: "",//期望从事行业
    writingTestingTimeStart: "",//笔试开始时间
    writingTestingTimeEnd: "",//笔试结束时间
    writingTestingResult: "",//笔试结果
    writingTestingStatus: "",//笔试状态
    interviewDateStart: "",//面试开始时间
    interviewDateEnd: "",//面试结束时间
    interviewStatus: "",//面试通知状态
    interviewResult: "",//面试结果
    interviewScore: "",//面试分数
    medicalReportStatus: "",//体检报告
    schoolName: "",//学校名称
    xuexinCoding: "",//学信网编码
    companyName: "",//公司名称
    positionName: "",//职位名称
    workDescription: "",//工作描述
    selfEvaluation: "",//自我评价
    onBoardTimeStart: "",//入职时间
    onBoardTimeEnd: "",//入职结束
    isRead: "",//已读未读
  } as any,
  ruleForm1: {
    statusGe: "",
    statusLe: "",
    searchValue: "",
    positionId: "",
    educationLevel: "",//学历
    requirementsYears: "",//工作经验
    arrivalTime: "",//到岗时间
    isAsc: "asc",
    pageNum: 1,
    pageSize: 10,
    deptId: "",//部门
    initialScreeningUnqualifiedLabel: "",//简历标签
    createTimeStart: "",//投递开始时间
    createTimeEnd: "",//投递结束时间
    writingTestingTimeStart: "",//笔试开始时间
    writingTestingTimeEnd: "",//笔试结束时间
    writingTestingResult: "",//笔试结果
    writingTestingStatus: "",//笔试状态
    interviewStatus: "",//面试通知状态
    interviewResult: "",//面试结果
    interviewScore: "",//面试分数
    interviewDateStart: "",//面试开始时间
    interviewDateEnd: "",//面试结束时间
    medicalReportStatus: "",//体检报告
  },
  headerData: [],
  asideData: {} as any,
  data: [],
  total: 0,
  type: 0,//header状态
  options: [] as any,//部门
  options1: [] as any,//学历
  options2: [] as any,//工作经验
  options3: [] as any,//到岗时间
  options4: [
    {
      dictValue: "0",
      dictLabel: "未通知"
    }, {
      dictValue: "1",
      dictLabel: "已通知"
    }, {
      dictValue: "2",
      dictLabel: "已接受"
    }
  ] as any,//笔试通知状态
  optionsPen: [
    {
      dictValue: "0",
      dictLabel: "未通知"
    }, {
      dictValue: "1",
      dictLabel: "已通知"
    }, {
      dictValue: "2",
      dictLabel: "已接受"
    }, {
      dictValue: "-1",
      dictLabel: "放弃面试"
    }
  ] as any,//笔试通知状态
  options5: [
    {
      dictValue: "-1",
      dictLabel: "无结果"
    }, {
      dictValue: "0",
      dictLabel: "未通过"
    }, {
      dictValue: "1",
      dictLabel: "已通过"
    }
  ] as any,//笔试结果
  options6: [] as any,//体检审查
  options7: [
    {
      dictValue: "0",
      dictLabel: "未上传"
    }, {
      dictValue: "1",
      dictLabel: "已上传"
    }
  ] as any,//体检报告上传状态
  optionsSocre: [
    // {
    //   dictValue: "",
    //   dictLabel: "全部"
    // }, 
    {
      dictValue: "5",
      dictLabel: "前5名"
    },
    {
      dictValue: "10",
      dictLabel: "前10名"
    }, {
      dictValue: "20",
      dictLabel: "前20名"
    }, {
      dictValue: "30",
      dictLabel: "前30名"
    }
  ]
})
// 查询
const onSearch = () => {
  console.log("查询", state.datas);
  if (state.datas) {
    state.datas.forEach(element => {
      if (element.name == `socreValueM`) {
        if (element.value) {
          state.ruleForm.orderByColumn = "interviewScore"
          state.ruleForm.isAsc = "desc"
        } else {
          state.ruleForm.orderByColumn = ""
          state.ruleForm.isAsc = "asc"
        }
      }
      if (element.name == `socreValue`) {
        if (element.value) {
          state.ruleForm.orderByColumn = "writingTestingScore"
          state.ruleForm.isAsc = "desc"
        } else {
          state.ruleForm.orderByColumn = ""
          state.ruleForm.isAsc = "asc"
        }
      } else {
        if (element.name == 'educationLevel' || element.name == 'requirementsYears' || element.name == 'arrivalTime') {
          console.log(element.name, element.value);
          if (element.value) {
            state.ruleForm[element.name] = element.value.join(',')
          } else {
            state.ruleForm[element.name] = element.value
          }
        } else {
          state.ruleForm[element.name] = element.value
        }

      }
    });
  }

  state.ruleForm.pageNum = 1
  positionRegistrationListApi(state.ruleForm)

}
// 重置
const onReset = () => {
  state.refreshSearch = !state.refreshSearch
  state.searchValue = ""
  console.log("重置");
  state.ruleForm.pageNum = 1
  state.ruleForm.pageSize = 10
  state.datas.forEach(element => {
    element.value = ""
  });
  for (const key in state.ruleForm) {
    if (key != 'statusGe' && key != 'statusLe' && key != "isAsc" && key != "pageNum" && key != "pageSize" && key != "statusNotIn" && key != "statusIn") {
      state.ruleForm[key] = ""
    }
  }
  positionRegistrationListApi(state.ruleForm)
}
onActivated(() => {
  console.log("页面");
  loading.value = true
  state.ruleForm.positionId=sessionStorage.getItem("asideValue")?sessionStorage.getItem("asideValue")=="0"?"":sessionStorage.getItem("asideValue"):""
  state.refresh = !state.refresh
  positionRegistrationListApi(state.ruleForm)

})
const listClick = (value: any) => {
  loading.value = true
  state.ruleForm = value
  state.refresh = !state.refresh
  positionRegistrationListApi(state.ruleForm)
}
function info() {
  state.options1 = dictSect("education")
  state.options2 = dictSect("requirements_years")
  state.options3 = dictSect("arrival_time")
  state.options6 = dictSect("resume_label")
}
info()
// 方法区--------------------------------------------------------------------
// nav方法回传
const headerClick = (value) => {
  console.log("表头：",value);
  // sessionStorage.setItem("asideValue","0")
  state.type = value.id
  state.asideData = value
  switch (state.type) {
    case 0:
      break;
    // case 1:
    //   state.ruleForm = state.ruleForm2
    //   break;
    // case 2:
    //   state.ruleForm = state.ruleForm3
    //   break;
    // case 3:
    //   state.ruleForm = state.ruleForm4
    //   break;
    // case 4:
    //   state.ruleForm = state.ruleForm5
    //   break;
    // case 5:
    //   state.ruleForm = state.ruleForm6
    //   break;

    default:
      break;
  }
  state.ruleForm.statusGe = value.labelData[value.values]?.statusGe
  state.ruleForm.statusIn = value.labelData[value.values]?.statusIn
  state.ruleForm.initialScreeningUnqualifiedLabel = value.labelData[value.values]?.initialScreeningUnqualifiedLabel
  positionRegistrationListApi(state.ruleForm)
  // state.ruleForm.statusLe = value.statusLe
  // state.ruleForm.statusGe = value.statusGe
}
// 侧边
const asideClick = (value) => {
  console.log("侧边栏:", value);
  if (value == 0) {
    state.ruleForm.positionId = ""
  } else {
    state.ruleForm.positionId = value
  }
  positionRegistrationListApi(state.ruleForm)
}
const positionRegistrationListApi = async (params) => {
  loadings.value = true
  let obj = params
  obj.positionId=sessionStorage.getItem("asideValue")?sessionStorage.getItem("asideValue")=="0"?"":sessionStorage.getItem("asideValue"):""
  obj.searchValue = state.searchValue.replace(/\s+/g, ',')
  console.log("搜索：", obj.searchValue);

  if (typeof obj.currentAddress == "string") {
    obj.currentAddress = params.currentAddress
  } else {
    obj.currentAddress = params.currentAddress ? params.currentAddress.join("") : ""
  }
  // console.log("地址：", obj.currentAddress);
  await positionRegistrationList(params).then((res: any) => {
    loadings.value = false
    loading.value = false
    console.log("homeData:", res);
    state.data = res.rows
    state.total = res.total
  })

}
const deptTreeListApi = async () => {
  await deptTreeList().then(res => {
    state.options = res.data.tree
  })
}
const findAddressLists = async () => {
  await findAddressList().then(res => {
    console.log("获取地址：", res);
    if (res.data) {
      state.options8 = res.data
    }
  })
}
// findAddressLists()
deptTreeListApi()
// 方法结束------------------------------------------------------------------

</script>
<style lang="less" scoped>
.yh-label-input {
  position: relative;
  overflow: auto;

  .yh-tag-box {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    z-index: 999;
    align-items: center;
    flex-wrap: wrap;

    .yh-tag {
      margin-left: 10px;
      margin-top: 10px;
    }
  }
}

.el-drawer__title {
  font-size: 24px !important;
}

.margin-left16 {
  margin-right: 16px;
  margin-bottom: 16px;
}
</style>